<?php
header("Content-type:text/html;charset=utf-8");
include_once 'commonDB.php';
	?>
	
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wrap {
				width: 100%;
				height: 100%;
				background-color: rgb(242, 242, 242);
			}
			
			#navigation {
				width: 100%;
				height: 50px;
				background-color: rgba(0, 0, 0, 0.8);
			}
			
			#nav {
				width: 1200px;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
				overflow: hidden;
			}
			
			#nav_log {
				width: 25%;
				height: 100%;
				float: left;
			}
			
			#nav_junp {
				width: 40%;
				height: 100%;
				float: left;
				overflow: hidden;
			}
			
			#nav_junp>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#nav_load {
				width: 35%;
				height: 100%;
				float: right;
				overflow: hidden;
			}
			
			#nav_load>div {
				width: 50%;
				height: 100%;
				float: left;
			}
			
			#grapes_hover {
				width: 100%;
				position: absolute;
				overflow: hidden;
				background-color: white;
				z-index: 1;
			}
			
			#keepout {
				width: 1000px;
				height: 200px;
				margin-left: auto;
				margin-right: auto;
				display: none;
				overflow: hidden;
			}
			
			#keepout>div {
				width: 15%;
				height: 100%;
				float: left;
				position: relative;
			}
			
			#keepout>div>a>img {
				position: absolute;
				top: 10%;
				left: 11%;
				width: 75%;
				height: 55%;
				padding: 0 20px 0 0;
				border-right: 2px solid #ccc;
			}
			
			#abyejiaoly {
				width: 100%;
				height: 220px;
				background-color: whitesmoke;
			}
			
			footer {
				width: 1000px;
				height: 100%;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			
			#footer_left {
				width: 20%;
				height: 80%;
				float: left;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle {
				width: 60%;
				height: 80%;
				float: left;
				overflow: hidden;
				border-bottom: 1px solid #CCCCCC;
			}
			
			#footer_middle>div {
				width: 20%;
				height: 100%;
				float: left;
			}
			
			#footer_right {
				width: 20%;
				height: 80%;
				float: right;
				border-bottom: 1px solid #CCCCCC;
			}
			
			.head {
				width: 2000px;
				/*min-width: 1200px;*/
				height: 720px;
				/*margin: 0 auto;*/
				overflow: hidden;
				position: relative;
				top: 0;
				left: 50%;
				margin-left: -1000px;
			}
			
			.rack {
				height: 720px;
				position: absolute;
				top: 0;
				left: 0;
				/*transition: all 0.5s;*/
			}
			
			.rack>div {
				width: 2000px;
				height: 720px;
				float: left;
			}
			
			.rack>div>a>img {
				width: 100%;
				height: 100%;
			}
			
			.ball {
				width: 200px;
				height: 10px;
				position: absolute;
				top: 700px;
				left: 44%;
			}
			
			.ball>div {
				width: 10px;
				height: 10px;
				color: white;
				text-align: center;
				line-height: 10px;
				border-radius: 10px;
				background-color: #ccc;
				margin-left: 15px;
				float: left;
			}
			/*````````````````````中间部分```````````````````*/
			
			.middle_head {
				width: 1200px;
				height: 75px;
				margin: 0 auto;
				text-align: center;
				position: relative;
			}
			
			.middle_head>h1 {
				line-height: 75px;
			}
			
			.border1 {
				width: 80px;
				border-bottom: 2px solid black;
				position: absolute;
				top: 33px;
				left: 720px;
			}
			
			.border2 {
				width: 80px;
				border-bottom: 2px solid black;
				position: absolute;
				top: 33px;
				left: 400px;
			}
			
			.chunk {
				width: 380px;
				height: 435px;
				background-color: white;
				text-align: center;
			}
			
			.img {
				width: 80px;
				border-radius: 10px;
				overflow: hidden;
				margin: 0 auto 20px;
			}
			
			.img>img {
				width: 100%;
			}
			
			.txt {
				margin-top: 20px;
				line-height: 25px;
			}
			
			.middle_center {
				width: 1200px;
				height: 1380px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			.chunk {
				float: left;
				margin-bottom: 20px;
			}
			
			.chunk:hover {
				box-shadow: 5px 5px 10px #ccc;
			}
			
			.chunk:nth-child(3n+1) {
				margin-left: 10px;
			}
			
			.chunk:nth-child(3n+2) {
				margin-left: 20px;
				margin-right: 20px;
			}
			
			.middle_head1 {
				width: 1200px;
				height: 75px;
				margin: 0 auto;
				text-align: center;
				position: relative;
			}
			
			.middle_head1>h1 {
				line-height: 75px;
			}
			
			.middle_foot {
				width: 1200px;
				height: 460px;
				overflow: hidden;
				margin: 0 auto;
			}
			
			.img1>img {
				margin-top: 70px;
				width: 380px;
				height: 151px;
			}
			a{
				text-decoration: none;
				color: black;
			}
			
		</style>
	</head>

	<body>
		<div class="wrap">
			<!--导航-->
			<div id="navigation">
				<!--让导航居中-->
				<div id="nav">
					<!--导航logo-->
					<div id="nav_log" class="nav_log">
						<a id="navloga" href="putou.php"><img class="nav_log_img" src="img/nav_logo.gif" /></a>
					</div>
					<div id="nav_junp" class="nav_jump">
						<!--首页-->
						<div>
							<a id="first" href="putou.php">
								首页
							</a>
						</div>
						<!--葡萄产品-->
						<div>
							<a id="grapes" href="###">
								葡萄产品
							</a>
						</div>
						<!--葡萄纬度-->
						<div>
							<a id="latitude" href="latitude.php">
								葡萄纬度
							</a>
						</div>
						<!--APP下载-->
						<div>
							<a id="APPdownload" href="APP.php">
								APP下载
							</a>
						</div>
						<!--嘉年华-->
						<div>
							<a id="carnival" href="JNH.php">
								嘉年华
							</a>
						</div>
					</div>
					<div id="nav_load" class="nav_load">
						<!--登陆-->
						<div><a id="load" href="denglu.php">登陆</a></div>
						<!--注册-->
						<div><a id="registered" href="zhuce2.php">注册</a></div>
					</div>
				</div>
			</div>
			<!--隐藏-->
			<div id="grapes_hover">
				<div id="keepout">
					<?php
                         $sql = "select * from putao_chanpin order by id desc limit 6";
                         $result = mysql_query($sql);
                       while ($row =mysql_fetch_assoc($result)) {
                       ?>
                       <div><a href="<?php echo $row["href"]; ?>"><img src="<?php echo $row["scr"]; ?>"/><?php echo $row["txt"]; ?></a></div>
                    
                       <?php } ?>
				</div>
			</div>
			<div class="head">
				<div class="rack">
					<div><a href="bgrqh.php"><img src="http://mall.file.putaocdn.com/file/ac56aa227313f30fb7415f7af9c958536c57c1c3.jpg" /></div></a>
					<div><a href="circuit.php"><img src="http://mall.file.putaocdn.com/file/e0b628dd1a78927eecdc864a50596a01f4bcc656.jpg" /></div></a>
					<div><a href="maisisi.php"><img src="http://mall.file.putaocdn.com/file/a3d9434cf07ac7998f9e74a24fe4c0a9be24cf31.jpg" /></div></a>
					<div><a href="word.php"><img src="http://mall.file.putaocdn.com/file/718770fde14967aa70cde46d6a8b51e3513cda93.jpg" /></div></a>
					<div><a href="Hello.php"><img src="http://mall.file.putaocdn.com/file/35910e63f80e0201099ccb5e850e17e2557a2d67.jpg" /></div></a>
					<div><a href="sea.php"><img src="http://mall.file.putaocdn.com/file/a823333e32fe533c491104ac3b7eedc0e59ae126.jpg" /></div></a>
					<div><a href="taotao.php"><img src="http://mall.file.putaocdn.com/file/c0021871e62e3bb0d621184bed278f5ff1357141.jpg" /></div></a>
					<div><a href="mofang.php"><img src="http://mall.file.putaocdn.com/file/f9ffe44bc6f56168236f712011a5bbce10be9f76.jpg" /></div></a>
				</div>
				<div class="ball">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			
			

			
			<div class="middle">
				<div class="middle_head">
					<h1>游戏专区</h1>
					<div class="border1"></div>
					<div class="border2"></div>
				</div>
				<div class="middle_center">
					<a href="bgrqh.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid darkorchid;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/1.jpg" />
						</div>
						<h2 style="margin-bottom: 20px">班德润的奇幻花园</h2>
						<span style="color: #ccc; font-size: 18px;">心随乐动, 拍出生命的乐章!</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="mofang.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid greenyellow;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/2.png" />
						</div>
						<h2 style="margin-bottom: 20px">旋转吧!魔方</h2>
						<span style="color: #ccc; font-size: 18px;">每个孩子必备的智能魔方</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="taotao.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid orange;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/3.png" />
						</div>
						<h2 style="margin-bottom: 20px">淘淘向右走</h2>
						<span style="color: #ccc; font-size: 18px;">获得七巧板,拼出奇幻冒险之旅</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="tutu.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid deepskyblue;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/4.jpg" />
						</div>
						<h2 style="margin-bottom: 20px">涂涂的世界</h2>
						<span style="color: #ccc; font-size: 18px;">用灵感秒回世界</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="maisi.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid hotpink;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/5.jpg" />
						</div>
						<h2 style="margin-bottom: 20px">麦斯丝</h2>
						<span style="color: #ccc; font-size: 18px;">用数字丈量快乐</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="haiyang.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid red;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/6.jpg" />
						</div>
						<h2 style="margin-bottom: 20px">哈尼海洋</h2>
						<span style="color: #ccc; font-size: 18px;">潜入想象的海洋</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="hebian.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid peachpuff;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/7.jpg" />
						</div>
						<h2 style="margin-bottom: 20px">Hello编程</h2>
						<span style="color: #ccc; font-size: 18px;">学会定义自己的方向</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="qhdianlu.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid gold;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/8.png" />
						</div>
						<h2 style="margin-bottom: 20px">奇妙电路</h2>
						<span style="color: #ccc; font-size: 18px;">串联奇思妙想</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/33.png" />
					</div>
					</a>
				</div>
				<div class="middle_head1">
					<h1>应用专区</h1>
					<div class="border1"></div>
					<div class="border2"></div>
				</div>
				<div class="middle_foot">
					<a href="bgrqh.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid darkorchid;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/9.png" />
						</div>
						<h2 style="margin-bottom: 20px">班德润的奇幻花园</h2>
						<span style="color: #ccc; font-size: 18px;">心随乐动, 拍出生命的乐章!</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="mofang.php">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid greenyellow;margin-bottom: 40px;"></div>
						<div class="img">
							<img src="img/10.png" />
						</div>
						<h2 style="margin-bottom: 20px">旋转吧!魔方</h2>
						<span style="color: #ccc; font-size: 18px;">每个孩子必备的智能魔方</span><br />
						<div class="txt">
							<span>实体鼓于iPad相结合,世界名曲遇到卡通奇幻</span><br />
							<span>世界, 小小演奏家从此诞生</span><br />
							<span>汇聚各类音乐, 搭配生动的效果,</span><br />
							<span>不仅能使视觉和心理产生一定的震撼力, 还能</span><br />
							<span>帮助孩子开发音乐天赋.</span><br />
							<span>高科技手势识别, 锻炼左右脑协调能力.</span><br />
						</div>
						<img style="margin-top: 15px;" src="img/333.png" />
						<img src="img/33.png" />
					</div>
					</a>
					<a href="###">
					<div class="chunk">
						<div class="border3" style="border-bottom: 3px solid midnightblue;margin-bottom: 40px;"></div>
						<div class="img1">
							<img src="img/11.png" />
						</div>
					</div>
					</a>
				</div>
			</div>
			<div id="abyejiaoly">
				<footer>
					<div id="footer_left">

					</div>
					<div id="footer_middle">
						<div>
							<h4>订单中心</h4>
							<a href="###">售后政策</a>
							<a href="###">配送常见问题</a>
							<a href="###">支付方式</a>
							<a href="###">支付常见问题</a>
							<a href="###">购物指南</a>
						</div>
						<div>
							<h4>服务支持</h4>
							<a href="###">配送方式</a>
							<a href="###">隐私政策</a>
							<a href="###">账户常见问题</a>
							<a href="###">淘淘向右走常见问题</a>
							<a href="###">班德瑞使用常见问题</a>
						</div>
						<div>
							<h4>商务合作</h4>
							<a href="###">商务合作</a>
						</div>
						<div>
							<h4>关于葡萄</h4>
							<a href="###">关于葡萄</a>
							<a href="###">联系我们</a>
						</div>
						<div>
							<h4>关于我们</h4>
							<a href="###">葡萄纬度</a>
						</div>
					</div>
					<div id="footer_right">
						<a href="###"><img src="img/btn_consult_qq@2x.png" /></a>
						<a href="###"><h2>400-651-6161</h2></a>
					</div>
					<h6>Copyright © 2016, Shanghai Putao Technology Co., Ltd. All Rights Reserved. 上海葡萄纬度科技有限公司</h6>
					<a href="###">沪IC备15015904号-3</a>
				</footer>
			</div>
		</div>

	</body>
	<script src="index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var head = document.querySelector(".head");
		var rack = document.querySelector(".rack");
		var divs = document.querySelectorAll(".rack>div");
		var ball = document.querySelectorAll(".ball>div");
		var w = head.offsetWidth
		rack.style.width = w * divs.length + "px";
		var page = 0;
		ball[0].style.backgroundColor = "white";
		var timer = null;

		function AUTO() {
			timer = setInterval(function() {
				page++;
				if (page > divs.length - 1) {
					page = 0;
				}
				for (var i = 0; i < ball.length; i++) {
					ball[i].style.backgroundColor = ""
				}
				ball[page].style.backgroundColor = "white";
				rack.style.left = -w * page + "px";

			}, 3000)
		}
		AUTO();
		for (var i = 0; i < ball.length; i++) {
			ball[i].index = i;
			ball[i].onclick = function() {
				clearInterval(timer)
				for (var j = 0; j < ball.length; j++) {
					ball[j].style.backgroundColor = ""
				}
				page = this.index;
				this.style.backgroundColor = "white"
				rack.style.left = -w * page + "px"
				AUTO();
			}
		}
		
	</script>

</html>